import React,{Component} from 'react'
import {
    Form,
    Input,
    Icon,
    Button,
    message
} from 'antd'

import {Redirect} from 'react-router-dom'

import logo from './images/logo.png'
import './login.less'
import {reqLogin} from '../../api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'


const Item = Form.Item;


class Login extends Component{
    //前台表单验证与数据收集

    /*
    用户名 / 密码的的合法性要求
    1). 必须输入
    2). 必须大于等于 4 位
    3). 必须小于等于 12 位
    4). 必须是英文、数字或下划线组成
    */
    login=(e)=>{
        // 阻止事件默认行为 ( 不提交表单 )
        e.preventDefault()
        this.props.form.validateFields(async(err,values)=>{
            if(!err){
                // 校验成功
                const {username, password} = values
                // console.log(' 提交登陆请求', username, password)
                const result = await reqLogin(username, password)
                // console.log('login()', result)
                if(result.status === 0){
                    // 提示登录成功
                    message.success(' 登录成功', 2)
                    // 保存用户登录信息
                    // memoryUtils.user=result.data;
                    const user = result.data
                    storageUtils.saveUser(user)
                    memoryUtils.user = user
                    // 跳转到主页面
                    this.props.history.replace('/')
                }else {
                    // 登录失败 , 提示错误
                    message.error(result.msg)
                }
            }
            // 校验失败
            console.log(err)
        })
    }



    //自定义表单的校验规则
    validator=(rule, value, callback)=>{
        // console.log(rule);
        // console.log(value)

        const length= value && value.length;
        const pwdReg = /^[a-zA-Z0-9_]+$/;
        if(!value){
            // callback 如果不传参代表校验成功，如果传参代表校验失败，并且会提示错误
            callback('必须输入密码')
        }else if (length<4){
            callback('密码必须大于4位')
        }else if (length > 12) {
            callback(' 密码必须小于 12  位')
        }else if(!pwdReg.test(value)){
            callback(' 密码必须是英文、数组或下划线组成')
        }else {
            callback()//必须调用
        }
    }

    render() {
        const {getFieldDecorator}=this.props.form
        if (memoryUtils.user && memoryUtils.user._id) {
            return <Redirect to='/'/>
        }
        return(
            <div className='login'>
                <header className='login-header'>
                    <img src={logo} alt="logo"/>
                    <h1>React 项目: 后台管理系统</h1>
                </header>
                <section className='login-content'>
                    <h3>用户登陆</h3>
                    <Form onSubmit={this.login} className="login-form">
                        <Item>
                            {
                                getFieldDecorator('username',{
                                    rules:[
                                        { required: true,whitespace:true, message: '必须输入用户名' },
                                        {min: 4, message: ' 用户名必须大于4位'},
                                        {max: 12, message: '用户名必须小于12位'},
                                        {pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数组或下划线组成'}
                                    ]
                                })(
                                    <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="用户名"/>
                                )
                            }
                        </Item>
                        <Item>
                            {
                                getFieldDecorator('password',{
                                    rules:[
                                        // 自定义表单校验规则
                                        {validator: this.validator}
                                    ]
                                })(
                                    <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password" placeholder=" 密码"/>
                                )
                            }

                        </Item>
                        <Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Item>
                    </Form>
                </section>
            </div>
        )
    }
}
const WrapLogin = Form.create()(Login);
export default WrapLogin